<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用promise完成多次ajax请求</title>
  <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    //先请求到monster.json
    //1. 创建Promise对象
    //2. 构造函数传入一个箭头函数
    //3. (resolve, reject) 参数列表resolve: 如果请求成功, 调用resolve函数
    //4. 如果请求失败, 调用reject函数
    //5. 箭头函数体, 仍然是通过jquery发出ajax
    let p = new Promise((resolve, reject) => {
      //发出ajax
      $.ajax({
        url: "Datax/monster.json",
        success(resultData) {
          console.log("promise发出的第1次ajax monster基本信息=", resultData);
          resolve(resultData);
        },
        error(err) {
          //console.log("promise 1发出的异步请求异常=", err);
          reject(err);
        }
      })
    })

    //这里我们可以继续编写请求成功后的业务
    p.then((resultData) =>{
      //这里我们可以继续发出请求
      //console.log("p.then 得到 resultData", resultData);
      return new Promise((resolve, reject) => {
        $.ajax({
          url: `Data/monster_detail_${resultData.id}.json`,
          success(resultData) {
            console.log("第2次ajax请求 monster的详细信息=", resultData);
            //继续进行下一次的请求
            resolve(resultData);
          },
          error(err) {//第2次ajax请求失败,回调函数
            //console.log("promise2 发出的异步请求异常=", err);
            reject(err);
          }
        })
      })
    }).then((resultData)=>{
      console.log("p.then().then(), resultData", resultData)
      //即可以在这里发出第3次ajax请求=》 获取该妖怪的女友
       return new Promise((resolve, reject) => {
        $.ajax({
          url: `Data/monster_gf_${resultData.gfid}.json`,
          success(resultData) { //第3次ajax请求成功,回调函数
            console.log("第3次ajax请求 monster女友的详细信息=", resultData);
            //继续进行下一次的请求
            //resolve(resultData);
          },
          error(err) { //第2次ajax请求失败,回调函数
            //console.log("promise2 发出的异步请求异常=", err);
            //reject(err);
          }
        })
      })
    }).catch((err) => {//这里可以对多次ajax请求的异常进行处理
      console.log("promise异步请求异常=", err);
    })
  </script>
</head>
<body>
</body>
</html>
